<template>
  <el-dialog :title="'会员投诉'" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" ref="dataForm" label-width="110px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="投诉单号" prop="complainNum">
            <el-input v-model="dataForm.complainNum" readonly disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="投诉类型" prop="complaintsType">
            <el-select v-model="dataForm.complaintsType" disabled>
              <el-option v-for="item in complaintsTypeOptions" :key="item.value" :value="item.value" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="配镜单号" prop="billId">
            <el-input v-model="dataForm.billId" readonly disabled>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="会员卡号" prop="customerCard">
            <el-input v-model="dataForm.customerCard" readonly disabled>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="会员姓名" prop="customerName">
            <el-input v-model="dataForm.customerName" readonly disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="会员电话" prop="phone1">
            <el-input v-model="dataForm.phone1" readonly disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计处理日期" prop="estimatedProcessingDate">
            <el-date-picker v-model="dataForm.estimatedProcessingDate" type="date" value-format="yyyy-MM-dd" disabled></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="投诉内容" prop="comlainContent">
            <el-input v-model="dataForm.comlainContent" type="textarea" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="avue-crud" v-if="dataForm.status">
        <el-table :data="dataList" border>
          <el-table-column prop="status" label="处理状态" :formatter="statusFormatter"></el-table-column>
          <el-table-column prop="resolveUsername" label="处理人"></el-table-column>
          <el-table-column prop="dealDate" label="处理时间"></el-table-column>
          <el-table-column prop="dealContent" label="处理结果"></el-table-column>
        </el-table>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
  import { customerComplaintInfo } from '@/api/eims/customer-complaint'
  import { fetchCustomerList } from '@/api/eims/customer'

  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          complainNum: '',
          complaintsType: '',
          customerId: '',
          customerCard: '',
          customerName: '',
          phone1: '',
          estimatedProcessingDate: '',
          comlainContent: '',
          status: '',
          dealContent: '',
          resolveUsername: '',
          dealDate: ''
        },
        dataList: [],
        complaintsTypeOptions: [{
            value: '01',
            name: '商品质量'
          }, {
            value: '02',
            name: '验光'
          }, {
            value: '03',
            name: '销售'
          }, {
            value: '04',
            name: '加工质量'
          }, {
            value: '05',
            name: '检验'
          },
          {
            value: '06',
            name: '送货'
          }, {
            value: '07',
            name: '服务态度'
          }, {
            value: '08',
            name: '订单失误'
          }, {
            value: '09',
            name: '调整校配'
          }, {
            value: '10',
            name: '时间延误'
          }
        ],
        statusOptions: [{
          value: 2,
          name: '处理中'
        }, {
          value: 1,
          name: '已处理'
        }, {
          value: 0,
          name: '未处理'
        }]
      }
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            customerComplaintInfo(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
                this.dataList = response.data.data.complainLogs
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      statusFormatter(row, column, cellValue, index) {
        switch (cellValue) {
          case 1:
            return '已处理'
            break
          case 2:
            return '处理中'
            break
          case 0:
            return '未处理'
            break
        }
      },
    }
  }
</script>

<style>
</style>
